<template>
  <view class="liunian-container">
    <e-navbar leftTitle="流年运势"></e-navbar>
    <view class="liunian-top">
      <image class="top-bg" :src="$image('/images/bagua-image.gif')" @load="gifLoad" mode="aspectFill"></image>
      <image class="liunian-top_title" :src="$image('/images/liunian-top-title.png')" mode="aspectFill"></image>
      <view class="liunian-top_btn-groups">
        <view class="liunian-top_btn-groups_item" v-for="(item, index) in top_btns" :key="index">
          <image :src="$image('/images/liunian-top-btn' + item.icon + '.png')" mode="aspectFill"></image>
          <view class="btn-groups-title">{{item.title}}</view>
        </view>
      </view>
    </view>
    <view class="font-28 text-center m-b-10 p-l-50 p-r-50" style="line-height: 50rpx">
      <view>详解各方运势，详批一生发展</view>
      <text>纵览人生，剖析</text>
      <text class="m-l-4 m-r-4" style="color: #00D7FF">事业·财富·感情·健康</text>
      <text>寻求机遇时机</text>
    </view>
    <view class="liunian-report-btn">
      <image class="liunian-report-btn_img" :src="$image('/images/liunian-report-btn.png')" mode="aspectFill"></image>
      <swiper class="swiper-body" :vertical="true" autoplay :circular="true">
        <swiper-item class="swiper-body_item" style="height: 100%" v-for="(item,index) in liuNianList" :key="index">
          <view class="liunian-report-btn_content">
            <view class="">
              <u-avatar :src="$image(item.avatar, 'yes')" size="47"></u-avatar>
            </view>
            <view class="flex-1 flex col-center row-between m-l-22">
              <view>
                <view class="font-28 m-b-10">{{ item.nickname }}</view>
                <view class="font-24" style="color:#A3B1B7">{{ item.time_text }}生成报告</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <view class="text-right flex-1 right-total" style="color:#3EE1FF;">
        <view class="font-26 m-b-6">{{ liunianTotal || '1' }}人</view>
        <view class="font-20">已生成报告</view>
      </view>
    </view>
    <view class="now-report-btn">
      <image :src="$image('/images/now-report-btn.png')" mode="scaleToFill" @click="handleToBirthdayInfo()"></image>
    </view>
    <view class="image-list">
      <image
        v-for="(item, index) in 5"
        :src="$image('/images/liunian-content' + (index + 1) + '.png')"
        mode="widthFix"
      ></image>
    </view>
    <view class="bottom-text">
      <view>测试部分免费，获取报告或解锁全部内容时，需付费查看 我平台所有测试仅供娱乐，不得作为生活、工作之指导。 </view>
      <view>我平台拒绝向18岁以下未成年人提供服务，</view>
      <view>如未成年人使用造成一切后果由其监护人承担。</view>
    </view>
    <e-register-popup ref="registerPopup"></e-register-popup>

    <!-- 支付方式弹窗 -->
    <e-pay-type-popup ref="payTypeRef" @choose="handleChoosePayType"></e-pay-type-popup>
    <!--  确认支付弹窗  -->
    <e-pay-popup ref="payPopupRef" @paySuccess="handlePayResult"></e-pay-popup>
  </view>
</template>

<script>
let app = getApp();
import {liunian_params} from "@/common/mock.js";
import {getCalendarDate, getAiZangGan} from "@/common/utils";
export default {
  data() {
    return {
      top_btns:[
        {
          icon:1,
          title:'事业·财富'
        },
        {
          icon:2,
          title:'家人·感情'
        },
        {
          icon:3,
          title:'健康·运程'
        },
      ],
      userinfo: {},
      liunian_params: JSON.parse(JSON.stringify(liunian_params)),
      liuNianList: [],
      liunianTotal: 0,
    };
  },
  onLoad() {
    let userinfo = uni.getStorageSync('userinfo') || "";
    if(userinfo){
      this.userinfo = JSON.parse(userinfo);
    }
    this.getLiuNianList();
  },
  methods: {
    // 获取已经占卜的用户
    async getLiuNianList(){
      const res = await this.$api.liunian_list();
      if(res.code == 1){
        this.liuNianList = res.data.list;
        this.liunianTotal = res.data.total;
      }
    },

    async getLiunianData() {
      if(this.userinfo){
        let calendarData = await getCalendarDate({
          date:this.$u.timeFormat(this.userinfo.birthday, "yyyy-mm-dd hh:MM:ss"),
          shenShaParams: {
            isShenSha: true,
            day: this.$u.timeFormat(this.userinfo.birthday, "yyyy-mm-dd hh:MM:ss"),
            sex: this.userinfo.gender == "男" ? 1 : 0,
            name: this.userinfo.nickname,
          }
        });
        let {
          lunarDateChinese,
          shiShen,
          zangGan,
          naYin,
          kongWang,
          daYun,
          liuNian,
          jiShenXiongSha,
          aiZangGan
        } = calendarData;
        let bazi = {
          profile: {
            "姓名": this.userinfo.nickname,
            "性别": this.userinfo.gender,
          },
          "公历": this.$u.timeFormat(this.userinfo.birthday, "yyyy-mm-dd hh:MM:ss"),
          "农历": lunarDateChinese,
          "十神": shiShen,
          "纳音": naYin,
          "空亡": kongWang,
          "大运": daYun,
          "流年": liuNian.allData,
          "吉神凶煞": jiShenXiongSha,
          "藏干": aiZangGan,
        };
        let newBazi = Object.assign(this.liunian_params.bazi, bazi);
        this.liunian_params.birthday = this.$u.timeFormat(this.userinfo.birthday, 'yyyy-mm-dd');
        this.liunian_params.req_time = this.$u.timeFormat(new Date().getTime(), "yyyy-mm-dd hh:MM:ss");
        setTimeout(async ()=>{
          this.liunian_params.bazi = JSON.stringify(newBazi);
          const res = await this.$api.req_yunshi({...this.liunian_params, isAi: true});
          if(res.result !== "" && res.status == "SUCCESS"){
            console.log(res);
          }
        },100)
      }

    },
    handleToBirthdayInfo(){
      app.isLogin(res=>{
        if(!app.isCompleteInfo()) return false;
        // this.$refs.payTypeRef.handleShowPayTypePopup({});
        uni.navigateTo({
          url: "/pagesAugur/birthdayInfo/birthdayInfo?agent_type=6"
        })
      })
    },
    // 组件中选择支付方式
    handleChoosePayType(val){
      console.log("组件中选择支付方式", val);
      let data = {
        payType: val,
        payWay: "liunian"
      }
      this.$refs.payPopupRef.handleShowPayPopup({}, data);
    },
    // 支付结果
    handlePayResult(data){
      console.log("支付回调", data);
      let url = "/pagesAugur/result/result";
      if(data && data.order_id){
        url = url + "?order_id=" + data.order_id;
      }
      uni.navigateTo({
        url
      })
    },
		gifLoad(e){
			console.log('git加载完毕',e);
		}
  }
}
</script>
<style>
 page{
   background-color: #000;
 }
</style>
<style lang="scss" scoped>
  .liunian-container{
    color: #fff;
    .liunian-top{
      height: 750rpx;
      width: 750rpx;
      position: relative;
      .top-bg{
        width: 100%;
        height: 100%;
        display: block;
      }
      &_title{
        width: 483rpx;
        height: 211rpx;
        display: block;
        position: absolute;
        top: 10rpx;
        left: 50%;
        transform: translateX(-50%);
      }
      &_btn-groups{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        z-index: 5;
        width: 100%;
        bottom: 28rpx;
        left: 0;
        &_item{
          width: calc(100% / 3);
          position: relative;
          image{
            width: 100%;
            height: 112rpx;
            display: block;
          }
          .btn-groups-title{
            position: absolute;
            left: 50%;
            top: 38%;
            transform: translate(-50%, -50%);
            font-size: 28rpx;
            font-family: 'pingfang-heavy';
            width: 100%;
            text-align: center;
          }
        }
      }
    }
    .liunian-report-btn{
      height: 275rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .swiper-body{
        height: 50%;
        width: 70%;
        transform: translateY(16%) !important;
        //position: absolute;
        //top: 58%;
        //left: 50%;
        //transform: translate(-50%, -50%);
        &_item{
        }
      }
      .right-total{
        position: absolute;
        transform: translateY(32%);
        right: 70rpx;
      }
      &_img{
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
      }
      &_content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-left: 60rpx;
        padding-right: 70rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .now-report-btn{
      height: 108rpx;
      margin: 30rpx;
      image{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .image-list{
      image{
        width: 100%;
        margin-top: -1rpx;
        display: block;
      }
    }
    .bottom-text{
      padding: 50rpx 74rpx;
      color: #64C5FF;
      font-size: 24rpx;
      font-family: 'pingfang-heavy';
      text-align: center;
      line-height: 40rpx;
    }
  }
</style>
